<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormRules } from 'element-plus'
import jzsmService from '@/api/jzsm'
import { JzsmListOutputDTO } from '@/api/jzsm-dto'
/*
 * 打开弹窗
 */
//
const emit = defineEmits(['refresh'])
const dialogVisible = ref(false)
const currentRow = ref()
const openDialog = (val: JzsmListOutputDTO[], row?: JzsmListOutputDTO) => {
  dialogVisible.value = true
  form.value.smjlxxList = val.map((el) => ({ jzsmjlbh: el.jzsmjlbh }))
  currentRow.value = row
}

/*
 * 确定按钮
 */
// 保存借阅审核结果入参
const form = ref({
  smjlxxList: [] as any[],
  thyy: '', // 退回原因
})

const rules = reactive<FormRules<any>>({
  thyy: [{ required: true, message: '必填', trigger: 'change' }],
})

const confirm = () => {
  const params = form.value
  jzsmService
    .thJzsmcl(params)
    .then(() => {
      dialogVisible.value = false
      ElMessage({ type: 'success', message: '退回成功' })
      emit('refresh')
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}
const closeDialog = () => {
  currentRow.value = undefined
}
defineExpose({ openDialog })
</script>
<template>
  <el-dialog
    v-model="dialogVisible"
    title="退回材料"
    width="600px"
    :close-on-click-modal="false"
    @close="closeDialog"
  >
    <div v-if="currentRow">
      {{ currentRow.thyy }}
    </div>
    <div v-else class="dialog-form">
      <el-form
        ref="ruleFormRef"
        :model="form"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        status-icon
      >
        <el-form-item label="退回原因" prop="thyy">
          <el-input v-model="form.thyy" type="textarea" maxlength="100" :rows="4" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button v-if="!currentRow" type="primary" style="margin-left: 10px" @click="confirm"
          >确定</el-button
        >
        <el-button type="default" style="margin-left: 10px" @click="dialogVisible = false"
          >取消</el-button
        >
      </div>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped></style>
